<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="app">

    <div class="line"></div>
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1"><a href="http://localhost:8080/vue-demo/showAllGoods2.html">所有商品</a></el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1" @click="dialogVisible = true">修改个人信息</el-menu-item>
            <el-menu-item index="2-2">与商户聊天</el-menu-item>
            <el-menu-item index="2-3" @click="dialogVisible10 = true">申请权限为商户端</el-menu-item>
        </el-submenu>
        <el-menu-item index="3" ><a href="http://localhost:8080/vue-demo/manageAddress2.html" target="_blank">管理地址</a></el-menu-item>
        <el-menu-item index="4"><a href="http://localhost:8080/vue-demo/showMyGouwucar2.html" target="_blank">我的购物车</a></el-menu-item>
        <el-menu-item index="5"><a href="http://localhost:8080/vue-demo/addPrice2.html" target="_blank">积分充值</a></el-menu-item>
        <el-submenu index="6">
            <template slot="title">支付订单管理</template>
            <el-menu-item index="6-1"><a href="http://localhost:8080/vue-demo/showAllOrderForm2.html" >所有订单</a></el-menu-item>
            <el-menu-item index="6-2"><a href="http://localhost:8080/vue-demo/showFalseOrderForm2.html" >未付款订单</a></el-menu-item>
            <el-menu-item index="6-3"><a href="http://localhost:8080/vue-demo/showSuccessOrderForm2.html" >已支付订单</a></el-menu-item>
        </el-submenu>
        <el-menu-item index="7" @click="signIn">每日签到</el-menu-item>
        <el-menu-item index="8" @click="dialogVisible11 = true">退出登录</el-menu-item>
    </el-menu>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="退出登录"
            :visible.sync="dialogVisible11"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px">
            <el-form-item>
                <el-button type="primary" @click="cancelLogin">确认要退出登录吗</el-button>
                <el-button @click="dialogVisible11 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="警告"
            :visible.sync="dialogVisible10"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px">
            <el-form-item>
                <el-button type="primary" @click="changeUserStatue">确认要转变成商户</el-button>
                <el-button @click="dialogVisible10 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="修改个人信息"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px">
            <el-form-item label="账号">
                <el-input v-model="user.userAccount" readonly></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="userName" >
                <el-input v-model="user.userName" :maxlength="12"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="userNickName">
                <el-input v-model="user.userNickName" :maxlength="6"></el-input>
            </el-form-item>
            <el-form-item label="用户手机号" prop="userPhone">
                <el-input v-model="user.userPhone" :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="modifyUser">确认修改</el-button>
                <el-button type="danger" @click="toggleDialogs">修改密码</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>



    <el-dialog
            title="修改密码"
            :visible.sync="dialogVisibleTwo"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px">

            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="user.pass" autocomplete="off" placeholder="请输入密码" :maxlength="12"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkpass">
                <el-input type="password" v-model="user.checkpass" autocomplete="off" placeholder="请再次输入密码" :maxlength="12"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="modifyUserPass">确认修改</el-button>
                <el-button @click="dialogVisibleTwo = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",

        mounted(){
            //当页面加载完成之后，发布异步请求获取数据

            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/loginUserMai"
            }).then(function (resp) {
                _this.user = resp.data;
            })


        },

        methods: {
            toggleDialogs() {
                this.dialogVisible = false;
                this.dialogVisibleTwo = true;
            },
            selectUser(){
                var _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/vue-demo/loginUserMai"
                }).then(function (resp) {
                    _this.user = resp.data;
                })

                _this.dialogVisible = true;
            },
            modifyUserPass(){
                console.log(this.modify);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/modifyUserPass",
                    data:_this.user
                }).then(function (resp) {

                    if(resp.data === "success"){
                        //成功
                        console.log(_this.user);
                        alert("修改密码成功")
                        _this.dialogVisibleTwo =  false
                    }
                    else if(resp.data === "error"){
                        //输入不正确
                        alert("输入不正确")
                    }
                    else if(resp.data === "errorPass"){
                        //输入不正确
                        alert("密码不够6位")
                    }
                })
            },
            changeUserStatue(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/changeUserStatue",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("您已经成功发送请求")
                        _this.dialogVisible10 = false;
                    }
                    else if(resp.data === "error"){
                        alert("您已经发出请求，请等待管理员审批")
                    }
                })
            },
            cancelLogin(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/cancelLogin",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("您已经退出登录")
                        window.location.href = "http://localhost:8080/vue-demo/hello.html";
                    }
                })
            },
            signIn(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/signIn",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("今日签到成功，已为您增加2积分")
                    }
                    else if(resp.data === "error"){
                        alert("今日已签到")
                    }
                })
            },
            modifyUser(){
                //console.log(this.user);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/modifyUser",
                    data:_this.user
                }).then(function (resp) {

                    if(resp.data === "success"){
                        //注册成功
                        console.log(_this.user);
                        alert("修改信息成功")
                        _this.dialogVisible =  false
                    }
                    else if(resp.data === "error"){
                        //输入不正确
                        alert("输入不正确")
                    }
                    else if(resp.data === "errorNickName"){
                        //输入不正确
                        alert("昵称重复")
                    }
                    else if(resp.data === "errorShopName"){
                        //输入不正确
                        alert("小店名称重复")
                    }
                    else if(resp.data === "errorShopName2"){
                        //输入不正确
                        alert("小店名称不能少于3个字")
                    }
                    else if(resp.data === "errorPhone"){
                        //输入不正确
                        alert("手机号重复")
                    }
                    else if(resp.data === "errorUserName"){
                        //输入不正确
                        alert("真实名字不能少于2个字")
                    }
                    else if(resp.data === "errorName"){
                        //输入不正确
                        alert("昵称不能少于3个字")
                    }
                })

            },

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick() {
                // 点击菜单项时的逻辑
                this.dialogVisible = true;
                this.dialogVisibleTwo = true;
            }
        },
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (value.length < 6) {
                        return callback(new Error('密码起码要6位'));
                    }
                    else if(/\s/.test(value)){
                        //如果存在空格
                        return callback(new Error('密码不可以有空格'));
                    }
                    if (this.user.checkpass !== '') {
                        this.$refs.form.validateField('checkpass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                }
                if (value.length < 6) {
                    return callback(new Error('密码起码要6位'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('密码不可以有空格'));
                }
                else if (value !== this.user.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var validateName = (rule, value, callback) => {
                if (value.length < 3) {
                    return callback(new Error('昵称不能少于3个字'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('昵称不可以有空格'));
                }
                else {
                    callback();
                }
            };
            var validateShopName = (rule, value, callback) => {
                if (value.length < 3) {
                    return callback(new Error('小店名称不能少于3个字'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('昵称不可以有空格'));
                }
                else {
                    callback();
                }
            };
            var validateUserName = (rule, value, callback) => {
                if (value.length < 2) {
                    return callback(new Error('真实姓名不能少于2个字'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('真实姓名不可以有空格'));
                }
                else {
                    callback();
                }
            };
            var validatePhone = (rule, value, callback) => {
                if (value.length !== 11) {
                    return callback(new Error('必须是11位数'));
                }
                else {
                    if(/\D/.test(value)){
                        //如果含有其他的符号
                        return callback(new Error('电话号码不能有符号'));
                    }
                    else {
                        callback();
                    }
                }
            };

            return{


                user: {
                    userID:'',
                    userPwd: '',
                    userNickName: '',
                    registerType:'注册为用户',
                    userPhone:'',
                    userAccount:'',
                    userDo:'',
                    userName:'',
                    pass: '',
                    checkpass: '',
                    shopName:'',
                },

                rules: {

                    userPhone: [
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                    userNickName: [
                        { validator: validateName, trigger: 'blur' }
                    ],
                    shopName: [
                        { validator: validateShopName, trigger: 'blur' }
                    ],
                    userName: [
                        { validator: validateUserName, trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkpass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                },
                activeIndex2: '1',
                dialogVisible: false,
                dialogVisible10: false,
                dialogVisible11: false,
                dialogVisibleTwo: false,
            }
        }
    })
</script>

</body>
</html>